<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>初识Vue</title>
    <!-- 
			过滤器：
				定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
				语法：
						1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
						2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
				备注：
						1.过滤器也可以接收额外参数、多个过滤器也可以串联
						2.并没有改变原本的数据, 是产生新的对应的数据
		-->
    <script type='text/javascript' src='../js/vue.js'></script>
    <!-- 处理时间的一个工具 -->
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>

<body>
    <div id='root'>
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h2>现在是：{{fmtTime}}</h2>
        <!-- methods实现 -->
        <h2>现在是：{{getFmtTime()}}</h2>
        <!-- 过滤器实现 -->
        <h2>现在是：{{time | timeFormater}}</h2>
        <!-- 过滤器实现 （传参）-->
        <h2>现在是：{{time | timeFormater('YYYY_MM_DD')}}</h2>
        <!-- 全局过滤器-->
        <h2>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h2>
        <!-- //:..="是不能显示过滤器" -->
        <h3 :x="msg | mySlice">123</h3>
        <h2></h2>
        
    </div>
    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
    <script type='text/javascript'>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //全局过滤器
        Vue.filter('mySlice',function(val){
            return val.slice(0,4)//截取前4位
        })
        //创建Vue实例
        new Vue({
            el: '#root',
            data: {
                time:1621561377603, //时间戳
				msg:'你好，尚硅谷'
            },
            computed: {
                fmtTime(){
                    //使用dayjs时间处理工具
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }
            },
            methods: {
                getFmtTime(){
                    //使用dayjs时间处理工具
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }
            },
            filters: {
                timeFormater(value,str="YYYY年MM月DD日 HH:mm:ss"){//es6语法默认值
                    return dayjs(value).format(str)
                }
            }
        })
        new Vue({
			el:'#root2',
			data:{
				msg:'hello,123!'
			}
		})
    </script>
</body>

</html>